<template>
  <div class="control_main">
    <div class="control_main_t">
      <releaselist></releaselist>
    </div>
    <div class="control_main_b">
      <div class="control_main_b_l">
        <div class="control_main_b_l_a">
          <myproduct></myproduct>
        </div>
        <div class="control_main_b_l_b">
          <myfootprint></myfootprint>
        </div>
      </div>
      <div class="control_main_b_r">
        <div class="control_main_b_r_a">
          <noticeinfo></noticeinfo>
        </div>
        <div class="control_main_b_r_b">
          <feedback></feedback>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import releaselist from "./releaselist/index";
import myproduct from "./myproduct/index";
import feedback from "./feedback/index";
import myfootprint from "./myfootprint/index";
import noticeinfo from "./noticeinfo/index";
export default {
  components: {
    releaselist,
    myproduct,
    feedback,
    myfootprint,
    noticeinfo,
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$viewH: calc(100vh - 84px);
$viewW: 100%;
$blockMargin: 10px;
.control_main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: #f3f3f3;
  padding: 10px;
  height: $viewH;

  .control_main_b_l_a,
  .control_main_b_l_b,
  .control_main_b_r_a {
    width: 100%;
    border: 1px solid #eaeaea;
    box-shadow: #aaa 0 0 10px -6px;
    background-color: #fff;
    border-radius: 10px;
  }
  .control_main_t {
    width: 100%;
    height: calc(18% - 10px);
    margin-bottom: 10px;
  }
  .control_main_b {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 82%;
    .control_main_b_l {
      width: calc(75% - 10px);
      margin-right: 10px;
      height: 100%;
      .control_main_b_l_a {
        height: calc(70% - 10px);
        margin-bottom: 10px;
      }
      .control_main_b_l_b {
        height: 30%;
      }
    }
    .control_main_b_r {
      width: calc(25% - 10px);
      height: 100%;
      margin-right: 10px;
      .control_main_b_r_a {
        height: calc(55% - 10px);
        margin-bottom: 10px;
      }
      .control_main_b_r_b {
        height: 45%;
      }
    }
  }
}
</style>